<template>
  <div class="server-main">
    <el-form :inline="true" v-model="modelData" class="search-form">
      <el-form-item label="测试对象" class="form-input">
        <el-input v-model.trim="modelData.objectName" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-form-item label="测试对象类型:" class="status">
          <el-select v-model="modelData.resultType">
            <el-option label="全部" value=""></el-option>
            <el-option label="数据库" value="数据库"></el-option>
            <el-option label="中间件" value="中间件"></el-option>
            <el-option label="办公软件" value="办公软件"></el-option>
            <el-option label="操作系统" value="操作系统"></el-option>
          </el-select>
        </el-form-item>
        <el-button size="small" type="primary" @click="onSubmit(1)">查询</el-button>
      </el-form-item>
    </el-form>
    <div class="server-table">
      <div class="table-title">
        <span class="table-title-text">效能评估</span>
        <div>
          <el-button size="small" type="primary" @click="openPreferredDialog">产品组合优选</el-button>
        </div>
      </div>
      <el-table :data="testList" class="km-table">
        <el-table-column type="index" label="ID" width="50" align="center"></el-table-column>
        <el-table-column prop="objectName" label="测试对象名称" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column prop="resultType" label="测试对象类型" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column prop="makeUpObject" label="组合评估对象" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column prop="makeUpObjectType" label="组合评估对象类型" align="center" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="操作" align="center" width="220">
          <template slot-scope="scope">
            <el-link :underline="false" type="primary" class="ontology-edit"
              @click.native.prevent="analiyies(scope.row)">查看效能评估效果</el-link>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination class="km-pagination" background :small="true" layout="total, prev, pager, next,sizes, jumper"
        :total="total" :hide-on-single-page="!total" :page-size.sync="modelData.pageSize" :pager-count="7"
        :page-sizes="[10, 20, 30]" :current-page="modelData.pageNum" @current-change="handleCurrentChange"
        @size-change="handleSizeChange">
      </el-pagination>

      <el-dialog title="效能评估结果" :visible.sync="previewDialog" width="30%">
        <el-form :model="resultForm">
          <el-form-item label="测试对象:" :label-width="formLabelWidth">
            <el-input v-model="resultForm.objectName" readonly></el-input>
          </el-form-item>
          <el-form-item label="测试对象类型:" :label-width="formLabelWidth">
            <el-input v-model="resultForm.resultType" readonly></el-input>
          </el-form-item>
          <el-form-item label="组合评估对象:" :label-width="formLabelWidth">
            <el-input v-model="resultForm.makeUpObject" readonly></el-input>
          </el-form-item>
          <el-form-item label="组合评估对象类型:" :label-width="formLabelWidth">
            <el-input v-model="resultForm.makeUpObjectType" readonly></el-input>
          </el-form-item>
          <el-form-item label="效能评估结果:" :label-width="formLabelWidth">
            <ul>
              <li v-for="(item,index) in resultFormArr" :key="index">
                {{item[0]}}：{{item[1]}}
              </li>
            </ul>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="previewDialog = false">关 闭</el-button>
        </span>
      </el-dialog>

      <el-dialog title="产品组合优选" :visible.sync="preferredDialog" width="30%" :before-close="handleClose">
        <el-form :model="preferredForm" label-width="100px" ref="preferredForm">
          <el-form-item label="测试对象:">
            <el-select v-model="preferredForm.objectName">
              <el-option v-for="item in options" :key="item.resultId" :label="item.objectName" :value="item.resultId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="组合对象类型:">
            <el-select v-model="preferredForm.resultType">
              <el-option label="数据库" value="数据库"></el-option>
              <el-option label="中间件" value="中间件"></el-option>
              <el-option label="操作系统" value="操作系统"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handlePreferred">产品组合优选推荐</el-button>
          </el-form-item>
        </el-form>

        <el-form v-show="showRecommand" :model="recommandForm" label-width="100px" ref="recommandForm">
          <el-form-item label="效能评估结果:"></el-form-item>
          <el-form-item label="产品名称:">
            <el-input v-model="recommandForm.makeUpObject" readonly></el-input>
          </el-form-item>
          <el-form-item label="产品类型:">
            <el-input v-model="recommandForm.makeUpObjectType" readonly></el-input>
          </el-form-item>
          <el-form-item label="预计效能:">
            <ul>
              <li v-for="(item,index) in recommandArr" :key="index">
                {{item[0]}}：{{item[1]}}
              </li>
            </ul>
          </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose">关 闭</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
  import {
    mapState,
    mapMutations
  } from "vuex";
  export default {
    name: "OntologyManagement",
    components: {},
    data: () => {
      return {
        previewDialog: false,
        formLabelWidth: "140px",
        resultForm: {
          objectName: "",
          resultType: "",
          resultType: "",
          makeUpObjectType: "",
        },
        resultFormArr: [],
        preferredDialog: false,
        preferredForm: {
          objectName: "",
          resultType: ""
        },
        options: [],
        recommandForm: {
          makeUpObject: "",
          makeUpObjectType: "",
        },
        showRecommand: false,
        recommandArr: [],
        modelData: {
          objectName: "", //测试对象名称
          pageNum: 1, // 页码
          pageSize: 10, // 每页条数
          resultType: ""
        },
        deleteModel: {
          resultId: "",
        },
        testList: [],
        tableList: [], // 本体列表
        total: 0, // 数据总条数
        loading: false,
        dialogFormVisible: false,
        uploadFormVisible: false,
        editOntologyId: null, // 编辑本体的id
        fileModel: {
          file_url: "",
        },
        modelParams: {
          resultId: "",
          defectDetection: "", // 本体名称
          testCoverage: "", // 本体描述
        },
        dialogType: "ADD",
        dialogConfig: {
          ADD: {
            title: "创建本体",
            funcName: "createOntology",
          },
          EDIT: {
            title: "测试结果编辑",
            funcName: "editOntology",
          },
        },
        rules: {
          ontologyAllName: [{
            required: true,
            message: "请输入本体名称",
            trigger: "blur",
          }, ],
          ontologyAllDescribe: [{
            required: true,
            message: "请输入本体描述",
            trigger: "blur",
          }, ],
          defectDetection: [{
            required: true,
            message: "测试检测率不能为空",
            trigger: "blur",
          }, ],
        },
        uploadRules: {
          fileName: [{
            required: true,
            message: "请选择本体文件",
            trigger: ["change", "blur"],
          }, ],
        },
        textSizeConfig: {
          minRows: 4,
          maxRows: 10,
        },
        uploadParams: {
          fileName: null,
        },
      };
    },
    computed: {
      ...mapState({
        containerDom: (state) => state.server.containerDom,
      }),
    },
    created() {
      this.getMakeUpList();
      // 获取本体列表
    },
    methods: {
      ...mapMutations({
        save_ontologyAllId: "ontologyModel/save_ontologyAllId",
      }),
      // 获取事件查询列表
      getMakeUpList() {
        let params = this.modelData;
        this.$axios
          .post(this.$api.resultAnalyse.zehaoObj.getMakeUpList, params)
          .then((res) => {
            console.log("res", res);
            let data = res.data.data.list;
            this.total = res.data.data.total;
            this.testList = data;
          })
          .catch((err) => {
            console.error(err);
          });
      },

      // 查询
      onSubmit(pageNum) {
        this.modelData.pageNum = pageNum ? pageNum : this.modelData.pageNum;
        this.getMakeUpList();
      },
      // 修改当前页码
      handleCurrentChange(page) {
        this.modelData.pageNum = page;
        this.getMakeUpList();
      },
      //修改当前页面容量
      handleSizeChange(page) {
        this.modelData.pageSize = page;
        this.getMakeUpList();
      },

      //查看评估结果
      analiyies(arg) {
        this.previewDialog = true;
        this.resultForm = arg;
        this.resultFormArr = Object.entries((JSON.parse(arg.detail)));
      },

      async openPreferredDialog() {
        this.preferredDialog = true;
        let res = await this.$axios.get(this.$api.resultAnalyse.zehaoObj.iaResultList)
        let {
          data,
          code,
          message
        } = res.data;
        if (code === 200) {
          this.options = data;
          return;
        }
        this.$message(message);
      },

      async handlePreferred() {
        this.preferredDialog = true;
        const {
          objectName,
          resultType
        } = this.preferredForm;
        const params = {
          resultId: objectName,
          makeUpObjectType: resultType,
        };
        let res = await this.$axios.post(this.$api.resultAnalyse.zehaoObj.makeUpRecommend, params)
        let {
          data,
          code,
          message
        } = res.data;
        if (code === 200) {
          if (data) {
            this.showRecommand = true;
            this.recommandForm = data;
            this.recommandArr = Object.entries(JSON.parse(data.detail));
            return;
          }
          this.showRecommand = false;
          return;
        }
        this.$message(message);
      },

      handleClose() {
        this.preferredDialog = false;
        this.preferredForm.objectName = undefined;
        this.preferredForm.resultType = undefined;
        this.recommandForm.makeUpObject = undefined;
        this.recommandForm.makeUpObjectType = undefined;
        this.showRecommand = false;
      },
    },
  };
</script>
<style lang="scss" scoped>
  .server-main {
    position: relative;

    .search-form {
      background: #ffffff;
      border-radius: 4px;
      padding: 16px 32px;

      .el-form-item {
        margin-bottom: 0;
      }

      .form-input {
        margin-right: 32px;

        .el-input,
        .el-select {
          ::v-deep .el-input__inner {
            width: 240px;
            height: 32px;
            background: #ffffff;
            border-radius: 2px;
            border: 1px solid #e0e0e0;
          }
        }
      }
    }

    .server-table {
      margin-top: 16px;
      padding: 16px 32px 64px;
      background: #ffffff;
      border-radius: 4px;

      .table-title {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .table-title-text {
          margin: 8px 0;
          font-size: 16px;
          line-height: 16px;
          border-left: 5px solid $--color-primary;
          padding-left: 10px;
        }

        margin-bottom: 10px;
      }
    }

    .ontology-edit {
      padding: 0 10px;

      &+.ontology-edit {
        border-left: 1px solid #dddddd;
      }
    }

    ::v-deep .el-table__append-wrapper {
      padding: 10px;
    }

    ::v-deep .el-dialog {
      width: 500px;
      border-radius: 5px;

      .el-select {
        width: 100%;
      }
    }

    .dialog-inline {
      ::v-deep .el-form-item__content {
        width: 300px;
      }

      button.el-button {
        background-color: $--color-primary !important;
        color: #fff !important;
        line-height: 1.2;
      }
    }

    .upload-hint {
      font-size: 12px;
      color: #aaa;
      text-align: center;
      line-height: 40px;
    }
  }
</style>